---
slug: webpack #路径，不能重复
title: webpack # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

> 打包工具

##### 局部安装

```shell
npm install -D webpack webpack-cli
```

##### 全局安装

```shell
npm install -g webpack webpack-cli
```

### 使用

如果报`Cannot use import statement outside a module` 这种错，即在`index.html`中对应导入的js加上`type="module"`


#### 引入

浏览器识别不了commonjs(`module.exports,require`)，需要借用webpack打包

调用`webpack`命令后生成dist包，导入`dist/main.js`则有效

#### 使用

##### 入口文件
webpack默认的入口文件是`src/index.js`,但是我们可以指定webpack的入口文件

```shell
webpack --entry ./src/main.js
```

##### 出口文件

webpack默认出口目录是dist,但是我们可以指定出口目录

```shell

webpack --output-path ./build
```


### 配置文件

`src/webpack.config.js` 是webpack命令默认寻找的配置文件
```js
const path = require("node:path");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist/bundle"),//输出文件目录,必须是一个绝对路径
    }
}

```

##### 配置别的webpack配置文件

启动命令行指定`--config`可以让webpack指定配置文件启动

```json
{
  "build":"webpack --config config/webpack.config.js"
}
```


### loader
默认情况下webpack只能解析 JavaScript 和 JSON，对于其他的要配置loader（加载器）

#### css-loader

> 这个loader是处理css文件的，但是只是处理，还没有插入html，需要另外一个loader[styleLoader](#styleLoader)

```shell
npm install css-loader -D
```

##### 内联式（一般不用）

> 意思是对于index.css这个css文件使用css-loader加载一下

```js
import "css-loader!../style/index.css";

```

##### 配置文件(webpack.config.js)

> 在webpack.config.js的`module.rules`里面配置

```js
module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源:以.css结尾的文件(.在正则是特殊符号,$表示以什么结尾)
                use: ["css-loader"]
            },
        ]
    }
```

###### rules

* test 文件的过滤

* use
    * loader 使用什么loader

* options 可选的属性，值是一个字符串或者对象，值会被传入loader

* ~~query~~ 目前已经被options代替

```js
const path = require("node:path");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist/bundle"),//输出目录必须是一个绝对路径
    },
    module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源
                use: {
                    loader: "css-loader",
                }
            },
        ]
    }
}
```

#### style-loader {#styleLoader}

> 使css样式效果生效:css-loader只能使得处理css，style-loader会使得css样式效果生效

```shell
npm install style-loader -D
```

##### 使用

> use传数组代表着既使用style-loader，也使用css-loader

**use是从后往前加载loader的，所以说应该是先加载css-loader处理css文件然后style-loader使处理后的css文件生效**

```js
module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源
                use: ["style-loader", "css-loader"]
            },
        ]
    }

```

#### 解析less

> less-loader依赖less来将less文件转换为css

```shell
npm install less
```

> less-loader 内部自动使用less转换为css文件

```shell
npm install less-loader
```

> less-loader只负责转换为css文件，还需要css-loader转换

```shell
npm install css-loader
```

> css文件需要style-loader使之生效

```shell
npm install style-loader
```

##### less最终

```js
module: {
        //配置loader
        rules: [
            {
                test: /\.less$/,
                use: ["style-loader","css-loader" ,"less-loader"]
            }
        ]
    }

```